<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="ruleForm"
				:model="queryData"
				label-width="100px"
				label-suffix=":"
				:inline="true"
			>
				<el-form-item :label="`${$t('dxn.card_ables_list.club_id')}`">
					<el-input
						v-model.trim="queryData.clubId"
						v-input="{ name: 'num' }"
						clearable
						style="width: 210px"
						:placeholder="`${$t('common.please_enter')}`"
					></el-input>
				</el-form-item>
				<el-form-item :label="`${$t('dxn.card_ables_list.club_name')}`">
					<el-input
						v-model.trim="queryData.clubName"
						v-symbols
						clearable
						:placeholder="`${$t('common.please_enter')}`"
					></el-input>
				</el-form-item>
				<el-form-item :label="`${$t('common.member_number')}`">
					<el-input
						v-model="queryData.userName"
						size="medium"
						clearable
						autocomplete="off"
						v-symbols
						:placeholder="$t('common.please_enter')"
						style="width:180px"
					></el-input>
				</el-form-item>
				<el-form-item :label="`商品生效状态`" label-width="140px">
					<el-select
						v-model="queryData.effectiveStatus"
						clearable
						:placeholder="`${$t('common.select_all')}`"
					>
						<el-option
							v-for="item in productEffectiveStatusArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="`商品类型`">
					<el-select
						v-model="queryData.goodsTypeList"
						clearable
						:placeholder="`${$t('common.select_all')}`"
						style="width:220px"
						multiple
					>
						<el-option
							v-for="item in productTypeArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="`商品名称`">
					<el-input
						v-model.trim="queryData.goodsName"
						v-input="{ name: 'symbols' }"
						clearable
						:placeholder="`${$t('common.please_enter')}`"
					></el-input>
				</el-form-item>
				<el-form-item :label="`商品状态`">
					<el-select
						v-model="queryData.status"
						clearable
						:placeholder="`${$t('common.select_all')}`"
						style="width:220px"
					>
						<el-option
							v-for="item in productStatusArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="剩余有效天数" label-width="120px">
					<el-input
						v-model="queryData.remainDayFrom"
						size="medium"
						:placeholder="$t('common.minimum')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'int' }"
						name="remainDayFrom"
						clearable
						@blur="
							handleAmount(
								queryData,
								1,
								'remainDayFrom',
								'remainDayTo',
								$t('member.check_min_tips')
							)
						"
					></el-input>

					-

					<el-input
						v-model="queryData.remainDayTo"
						size="medium"
						:placeholder="$t('common.maximum')"
						style="width: 120px"
						maxLength="15"
						v-input="{ name: 'int' }"
						name="remainDayTo"
						clearable
						@blur="
							handleAmount(
								queryData,
								2,
								'remainDayFrom',
								'remainDayTo',
								$t('member.check_max_tips')
							)
						"
					></el-input>
				</el-form-item>
				<el-form-item :label="`最早购买时间`" label-width="120px">
					<el-date-picker
						v-model="buyTime"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="
							$t('dxn.card_ables_list.start_time')
						"
						:end-placeholder="$t('dxn.card_ables_list.end_time')"
						format="yyyy-MM-dd HH:mm:ss"
						:picker-options="pickerShortcut2"
						:default-time="defaultTime"
						value-format="timestamp"
						align="right"
					></el-date-picker>
				</el-form-item>
				<el-form-item :label="`当前使用商品`" label-width="120px">
					<el-select
						v-model="queryData.applyStatus"
						clearable
						:placeholder="`${$t('common.select_all')}`"
					>
						<el-option
							v-for="item in currentProductUsedArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="handleSearch"
					>
						{{ $t('dxn.card_ables_list.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-right"
						size="medium"
						@click="reset"
					>
						{{ $t('dxn.card_ables_list.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90870120')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="exportExcel"
					>
						{{ $t('dxn.card_ables_list.export_excel') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				ref="refTable"
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				border
				:data="list"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
				highlight-current-row
				header-align="center"
			>
				<el-table-column
					type="index"
					label="序号"
					width="120"
					align="center"
				/>
				<el-table-column
					label="商品编号"
					min-width="130"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.goodsCode || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`商品名称`"
					min-width="160"
					align="center"
				>
					<template slot-scope="scope">
						<div
							v-if="scope.row.goodsName"
							class="text-link"
							@click="
								handleJump({
									path: '/dxn/shopManager/productBasicConfig',
									query: {
										goodsName: scope.row.goodsName
									}
								})
							"
						>
							{{ scope.row.goodsName }}
						</div>
						<div v-else>-</div>
					</template>
				</el-table-column>
				<el-table-column
					:label="`商品类型`"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.goodsTypeName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`商品状态`"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.goodsStatusName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="俱乐部ID"
					min-width="120"
					align="center"
				>
					<template slot-scope="scope">
						<div
							v-if="scope.row.clubId"
							class="text-link"
							@click="
								handleJump({
									path: '/dxn/clubManager/clubList',
									query: {
										clubId: scope.row.clubId
									}
								})
							"
						>
							{{ scope.row.clubId }}
						</div>
						<div v-else>-</div>
					</template>
				</el-table-column>
				<el-table-column
					label="俱乐部名称"
					min-width="150"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.clubName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`会员账号`"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.userName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`会员昵称`"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.nickName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`商品生效状态`"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.effectiveStatusName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`剩余有效天数`"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.remainDay }}
					</template>
				</el-table-column>
				<el-table-column
					label="商品失效时间"
					min-width="160"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							scope.row.remainDay === durationPermanentDesc
								? '-'
								: scope.row.invalidTimeStr || '-'
						}}
					</template>
				</el-table-column>
				<el-table-column
					:label="`当前使用商品`"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.applyStatusName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="最早购买时间"
					min-width="160"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.buyTimeStr || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`购买商品总次数`"
					min-width="130"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.totalCount }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`购买商品总金额`"
					min-width="150"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.totalAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					fixed="right"
					:label="`${$t('dxn.card_ables_list.operate')}`"
					min-width="120"
					align="center"
				>
					<template slot-scope="scope">
						<span
							class="text-link"
							@click="
								handleJump({
									path: '/dxn/shopManager/productBuyRecord',
									query: {
										goodsName: scope.row.goodsName,
										userName: scope.row.userName
									}
								})
							"
						>
							查看购买记录
						</span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="$store.getters.pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
	</main-content>
</template>

<script>
import { routerNames } from '@/utils/consts'
import dayjs from 'dayjs'
import list from '@/mixins/list'
import MainContent from '@/components/MainContent/index.vue'
import {
	productStatusArr,
	productEffectiveStatusArr,
	currentProductUsedArr,
	durationPermanentDesc
} from '@/views/dxn/shopManager/components/constants'

const start = () =>
	dayjs()
		.startOf('day')
		.subtract(6, 'day')
const end = () => dayjs().endOf('day')

export default {
	name: routerNames.memberProductList,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		return {
			loading: false,
			list: [],
			exportBtnLoading: false,
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				clubId: '',
				clubName: '',
				userName: '',
				goodsName: '',
				status: '',
				applyStatus: '',
				goodsTypeList: [],
				effectiveStatus: '',
				remainDayFrom: undefined,
				remainDayTo: undefined
			},
			buyTime: [start(), end()],
			productStatusArr,
			productTypeArr: [],
			productEffectiveStatusArr,
			currentProductUsedArr,
			durationPermanentDesc
		}
	},
	created() {
		this.getProductTypeArr()
	},
	methods: {
		// 获取商品类型配置
		getProductTypeArr() {
			this.productTypeArr = []
			this.$api
				.getBackendEnumListBend({ code: 1001 })
				.then((res) => {
					this.productTypeArr = res?.data || []
				})
				.catch(() => {})
		},
		getCurrentParams() {
			const [startTime, endTime] = this.buyTime || []
			const params = {
				...this.queryData,
				buyTimeFrom: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				buyTimeTo: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			if (!params.goodsTypeList?.length) {
				params.goodsTypeList = undefined
			}
			return params
		},
		loadData() {
			const params = this.getParams(this.getCurrentParams())
			this.loading = true
			this.list = []
			this.$api
				.getUserGoodsListBend(params)
				.then((res) => {
					this.loading = false
					const { record = [], totalRecord } = res.data || {}
					this.list = record
					this.total = totalRecord || 0
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleSearch() {
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			Object.keys(this.queryData).forEach((key) => {
				if (Array.isArray(this.queryData[key])) {
					this.queryData[key] = []
				} else {
					this.queryData[key] = undefined
				}
			})
			this.pageNum = 1
			this.buyTime = [start(), end()]
			this.loadData()
		},
		exportExcel() {
			const params = this.getParams(this.getCurrentParams())
			params.pageSize = undefined
			params.pageNum = undefined
			this.exportBtnLoading = true
			this.exportExcelPublic({
				api: 'exportUserGoodsListBend',
				params
			}).finally(() => {
				this.exportBtnLoading = false
			})
		},
		// 跳转
		handleJump(obj) {
			this.$router.push(obj)
		}
	}
}
</script>
<style lang="scss" scoped></style>
